<!--
 * @Description: 附件组件
 * @Author: wangwangwang
 * @Date: 2020-12-14 11:06:22
 * @LastEditors: wangwangwang
 * @LastEditTime: 2020-12-14 19:23:15
-->
<template>
  <section>
    <el-upload v-if="upload" :disabled="disabled" action="/resource/resources/upload" :show-file-list="false" :before-upload="beforeUpload" :on-success="filesuccess" :headers="upheader">
      <el-link :underline="false" :disabled="disabled">选择附件</el-link>
    </el-upload>
    <div style="margin-top:10px;">
      <div v-for="(item, index) in files" :key="index" class="upload-item-text">
        <span>
          <i class="icon iconfont iconhome_icon_txt"></i>
          <span @click="$wps(item.fileUrl,fileMessage.watermark)">{{item.fileName}}</span>
        </span>
        <span>
          <span>上传时间：{{item.createTime}}</span>
          <span v-show="!disabled" class="table_link" style="cursor:pointer;margin-left:30px;" @click="delfile(index)">删除</span>
        </span>
      </div>
    </div>
  </section>
</template>
<script>
import { getToken, getUserId } from '@/utils/auth';
import { getFileDetails } from '@/api/common';
import { Loading } from 'element-ui';
let loadingInstance;
export default {
  props: {
    files: {
      type: Array,
      default: new Array()
    },
    fileCode: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    upload: {
      type: Boolean,
      default: true
    },

  },
  data() {
    return {
      fileMessage: {},
      upheader: {
        "access-token": getToken(),
        "user-id": getUserId(),
      },
    }
  },
  methods: {
    delfile(index) {
      this.$emit('deleteFile', index);
    },
    beforeUpload(file) {
      console.log(JSON.parse(JSON.stringify(this.fileMessage)))
      console.log(this.files)
      if (!this.fileMessage || !this.fileMessage ?.fileType) {
        this.$message.error('当前流程未配置附件，请配置后再进行上传');
        return false;
      }
      const fileType = file.name.split('.')[1];
      const isTYPE = this.fileMessage.fileType.indexOf(fileType) > -1;
      const isLtM = file.size / 1024 / 1024 < this.fileMessage.trillionSize;
      if (!isTYPE) {
        this.$message.error('文件格式只能为' + this.fileMessage.fileType);
        return false;
      }
      if (!isLtM) {
        this.$message.error(`文件大小不能超过${this.fileMessage.trillionSize}M`);
        return false;
      }
      loadingInstance = Loading.service({ text: '上传中...' });
      return true;
    },
    filesuccess(res) {
      if (res.code === 1001) {
        this.$emit('uplodeSuccess', res.data);
        loadingInstance.close();
      }
    },
  },
  mounted() {
    getFileDetails({ code: this.fileCode }).then(res => {
      if (res.code === 1001) {
        console.log(res.data)
        this.fileMessage = res.data;
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.upload-item-text {
  cursor: pointer;
  padding: 0px 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  line-height: 30px;
  position: relative;
  > span:nth-of-type(2) {
    display: inline-block;
    width: 330px;
    position: absolute;
    right: 0;
  }
  .iconhome_icon_txt {
    color: $bg_color;
    font-size: 14px;
    padding-right: 10px;
  }
  .iconzu2197:hover {
    color: $bg_color;
  }
  .iconzu2197 {
    color: #c0c4cc;
    font-size: 14px;
  }
}
.el-link {
  color: $bg_color;
}
.el-link:hover {
  color: $bg_color;
  opacity: 0.7;
}
</style>
